{extend name="mainadmin@layouts/base" /}
{block name="head" }
<link href="__STATIC__/main/css/stylesheets/uploadify/uploadify.min.css" rel="stylesheet"/>
<link href="__STATIC__/main/css/stylesheets/page/goods.css?v=1" rel="stylesheet"/>
<link rel="stylesheet" href="__STATIC__/js/jquery/jquery_ui/jquery-ui.css">
<script src="__STATIC__/js/jquery/jquery_ui/jquery-ui.js"></script>
<style>
    @font-face {

        　　font-family: 'msyhbd';
        　　src: url('__STATIC__/share/msyhbd.ttc');

    }

    #share_img_box {
        font-family: 'msyhbd';
        width: 375px;
        height: 666px;
        border: 1px solid #000;
        overflow: hidden;
        position: relative;
    }

    #share_bg_img {
        width: 100%;
    }

    #share_img_box .share_qrcode {
        border: 1px dashed #000;
        position: absolute;
        z-index: auto;
        user-select: auto;
    }

    #share_img_box .share_avatar {
        position: absolute;
        cursor: default;
        border: 1px dashed #000;
        position: absolute;
        z-index: auto;
        user-select: auto;
    }

    #share_img_box .share_nick_name {
        position: absolute;
        cursor: default;
        border: 1px dashed #000;
        position: absolute;
        font-weight: bold;
        z-index: auto;
        user-select: auto;
    }

    .circle {
        border-radius: 50%;
    }

    #share_img_box .share_avatar span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 12px;
        background-color: #ddd;
        overflow: hidden;
    }
</style>
{/block}
{block name="main" }

<header>
    <div class="page-breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <i class="fa fa-ellipsis-v"></i>
                <strong>分销设置</strong>
            </li>
        </ul>
        <div style="float:right; padding-right:10px;">
            <a class="refresh" id="refresh-toggler" href=""><i class="fa fa-refresh"></i></a>
        </div>
    </div>
</header>
<form class="form-horizontal form-validate form_vbox" id="_form" method="post" action="{:url('save')}">
    <section class="vbox">
        <section class="scrollable  wrapper w-f">
            <section class="panel panel-default ">
                <header>
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#basic" data-toggle="tab">基本配置</a></li>

                        <li><a href="#background" data-toggle="tab">分享海报</a></li>
                    </ul>
                </header>

                <div class="tab-content ">
                    <div class="tab-pane active" id="basic">
                        <div class="form-group m-t hide">
                            <label class=" control-label">身份升级机制：</label>
                            <div class="controls">
                                <label class="radio-inline">
                                    <input name="level_up_type" value="0" {$Dividend['level_up_type']==0?'checked':''}
                                    type="radio">
                                    逐级升级
                                </label>
                                <label class="radio-inline">
                                    <input name="level_up_type" value="1" {$Dividend['level_up_type']==1?'checked':''}
                                    type="radio">
                                    可跨级升级（满条件即可）
                                </label>
                            </div>
                        </div>
                        <div class="form-group m-t">
                            <label class=" control-label">是否开启推荐：</label>
                            <div class="controls">
                                <label class="radio-inline">
                                    <input name="status" value="0" {$Dividend['status']==0?'checked':''} type="radio"
                                    >停用
                                </label>
                                <label class="radio-inline">
                                    <input name="status" value="1" {$Dividend['status']==1?'checked':''} type="radio">启用
                                </label>
                                <span class="help-inline">（停用后，将不执行推荐关系绑定）</span>
                            </div>
                        </div>

                        <div class="form-group m-t hide">
                            <label class=" control-label">分享权限：</label>
                            <div class="controls">
                                <label class="radio-inline">
                                    <input name="share_by_role" value="0" {$Dividend['share_by_role']==0?'checked':''}
                                    type="radio"> 无需身份
                                </label>
                                <label class="radio-inline">
                                    <input name="share_by_role" value="1" {$Dividend['share_by_role']==1?'checked':''}
                                    type="radio"> 需分佣身份
                                </label>
                            </div>
                        </div>
                        <div class="form-group hide">
                            <label class=" control-label">佣金到帐时间：</label>
                            <div class="col-sm-8 controls">
                                <strong>{$shop_after_sale_limit==0?'订单签收到帐':$shop_after_sale_limit.'天'}</strong>
                                <span class="help-inline">（与订单申请售后时间一致，即签收后过了此时间即到帐，如需修改请前往【商城-商城设置】中修改）</span>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class=" control-label">创业礼包：</label>
                            <div class="col-sm-8 controls">
                                购买升级合伙人，赠送<input type="text" name="cylb_num" class="input-mini valid"
                                                                         data-rule-required="true" data-rule-ismoney="true"
                                                                         value="{$Dividend['cylb_num']}" aria-required="true"
                                                                         aria-invalid="false">
                                个创业礼包,创业补贴金额<input type="text" name="cylb_money" class="input-mini valid"
                                                              data-rule-required="true" data-rule-ismoney="true"
                                                              value="{$Dividend['cylb_money']}" aria-required="true"
                                                              aria-invalid="false">元
                            </div>
                        </div>
                        <div class="form-group">
                            <label class=" control-label">奖励拆分：</label>
                            <div class="col-sm-8 controls">
                                达到条件之前，所有奖励一分为二，其中<input type="text" name="balance_rebate" class="input-mini valid"
                                                                         data-rule-required="true" data-rule-ismoney="true"
                                                                         value="{$Dividend['balance_rebate']}" aria-required="true"
                                                                         aria-invalid="false">
                                %为收益，<input type="text" name="integral_rebate" class="input-mini valid"
                                               data-rule-required="true" data-rule-ismoney="true"
                                               value="{$Dividend['integral_rebate']}" aria-required="true"
                                               aria-invalid="false">
                                %为扶持基金，当你直推<input type="text" name="rebate_push_num" class="input-mini valid"
                                                           data-rule-required="true" data-rule-ismoney="true"
                                                           value="{$Dividend['rebate_push_num']}" aria-required="true"
                                                           aria-invalid="false">个老板之后，扶持基金自动转成收益
                            </div>
                        </div>

                        <div class="form-group">
                            <label class=" control-label">平级奖设置：</label>
                            <div class="col-sm-8 controls">
                                <input type="text" name="pingjimoney" class="input-mini valid"
                                       data-rule-required="true" data-rule-ismoney="true"
                                       value="{$Dividend['pingjimoney']}" aria-required="true"
                                       aria-invalid="false"> % <span style="color:#f00">注：加盟区的商品单独设置，这里是其他商品平级奖设置</span>
                            </div>
                        </div>

                        <!--<div class="form-group">
                            <label class=" control-label">冻积分释放：</label>
                            <div class="col-sm-8 controls">
                                当日营业额的<input type="text" name="sf_integral_rebate" class="input-mini valid" data-rule-required="true" data-rule-ismoney="true" value="{$Dividend['sf_integral_rebate']}" aria-required="true" aria-invalid="false">%
                            </div>
                        </div>
                        <div class="form-group">
                            <label class=" control-label">奖金池：</label>
                            <div class="col-sm-8 controls">
                                加盟区订单金额的
                                {foreach $userLevel as $level}
                                    <input type="text" name="prize_pool[{$level.level_id}]" class="input-mini valid" data-rule-required="true" data-rule-ismoney="true" value="{$Dividend['prize_pool'][$level.level_id]}" aria-required="true" aria-invalid="false"> %进入{$level.level_name}奖金池
                                {/foreach}


                            </div>
                        </div>-->

                    </div>


                    <div class="tab-pane" id="background">

                        <div class="form-group">
                            <label class="col-sm-1 control-label">海报背景图片：</label>
                            <div class="col-sm-10">
                                <div class="js_upload_container">
                                    <div class="js_file_upload ">
                                        <button type="button" class="btn btn-default js_new_upload"
                                                data-fun="updateShareBg" data-count="5" data-submitname="ShareBg"
                                                data-uploadpath="{:url('uploadShareBg')}"
                                                data-delpath="{:url('removeImg')}"
                                                style="position: relative; z-index: 1;">上传图片
                                        </button>
                                        <span class="maroon">*</span>
                                        <span class="help-inline"><small>建议尺寸：建议尺寸750*1330px，JPG、PNG格式，图片小于2MB，默认显示第1张图片，最多5张 (可拖拽图片调整显示顺序) </small></span>
                                    </div>
                                    <div class="uploadify-queue js_file_upload_queue">
                                    </div>
                                    <ul class="ipost-list ui-sortable js_fileList share_img_list" data-required="true">
                                        {volist name="share_bg" id="shbg" }
                                        <li class="imgbox" data-path="{$shbg}">
                                            <a class="item_new_close item_close" href="javascript:void(0)"
                                               data-delpath="{:url('removeImg')}" title="删除"></a>
                                            <span class="item_box"><img src="{$shbg}"></span>
                                            <input type="hidden" name="ShareBg[path][]" value="{$shbg}">
                                        </li>
                                        {/volist}
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in " style="width:99%;"></div>
                        <div class="col-sm-12">
                            <div class="col-sm-6">
                                <div class="form-group hide">
                                    <label class="col-sm-3 control-label">头像位置：</label>
                                    <div class="controls">
                                        <input type="text" name="setting[share_avatar_xy]" class="input-small"
                                               value="{$setting.share_avatar_xy}" placeholder="格式：x,y"> <span
                                            class="help-line">x：距离左边距离，y：距离顶部距离</span>
                                    </div>
                                </div>
                                <div class="form-group hide">
                                    <label class="col-sm-3 control-label">头像宽度：</label>
                                    <div class="controls">
                                        <input type="text" name="setting[share_avatar_width]" data-rule-digits="true"
                                               data-rule-required="true" class="input-small"
                                               value="{$setting.share_avatar_width}"> <span class="help-line">(px)像素，只可输入数字</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">头像形状：</label>
                                    <div class="controls">
                                        <div class="controls">
                                            <label class="radio-inline">
                                                <input class="share_avatar_shape" name="setting[share_avatar_shape]"
                                                       value="0" {$setting['share_avatar_shape']<=0?'checked':''}
                                                type="radio">圆形
                                            </label>
                                            <label class="radio-inline">
                                                <input class="share_avatar_shape" name="setting[share_avatar_shape]"
                                                       value="1" {$setting['share_avatar_shape']==1?'checked':''}
                                                type="radio" >方形
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group hide">
                                    <label class="col-sm-3 control-label">呢称位置：</label>
                                    <div class="controls">
                                        <input type="text" name="setting[share_nick_name_xy]" class="input-small"
                                               value="{$setting.share_nick_name_xy}" placeholder="格式：x,y"> <span
                                            class="help-line">x：距离左边距离，y：距离顶部距离</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">呢称相对居中：</label>
                                    <div class="controls">
                                        <label class="radio-inline">
                                            <input name="setting[share_nick_name_center]" value="0" {$setting['share_nick_name_center']<=0?'checked':''}
                                            type="radio">关闭
                                        </label>
                                        <label class="radio-inline">
                                            <input name="setting[share_nick_name_center]" value="1" {$setting['share_nick_name_center']==1?'checked':''}
                                            type="radio" >开启
                                        </label>
                                        <span class="help-line" style="vertical-align: middle;">x：相对头像居中</span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label">呢称颜色：</label>
                                    <div class="controls minicolors minicolors-theme-bootstrap minicolors-position-bottom minicolors-position-left">
                                        <input type="text" name="setting[share_nick_name_color]"
                                               class="form-control colorpicker minicolors-input"
                                               style="padding-left: 30px;" data-control="hue"
                                               value="{$setting.share_nick_name_color}" size="7">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">呢称字体大小：</label>
                                    <div class="controls">
                                        <input type="text" name="setting[share_nick_name_size]" data-rule-digits="true"
                                               data-rule-required="true" class="input-small"
                                               value="{$setting.share_nick_name_size}" placeholder=""> <span
                                            class="help-line">(px)像素，只可输入数字</span>
                                    </div>
                                </div>

                                <div class="form-group hide">
                                    <label class="col-sm-3 control-label">二维码位置：</label>
                                    <div class="controls">
                                        <input type="text" name="setting[share_qrcode_xy]" class="input-small"
                                               value="{$setting.share_qrcode_xy}" placeholder="格式：x,y"> <span
                                            class="help-line">x：距离左边距离，y：距离顶部距离</span>
                                    </div>
                                </div>
                                <div class="form-group hide">
                                    <label class="col-sm-3 control-label">二维码宽度：</label>
                                    <div class="controls">
                                        <input type="text" name="setting[share_qrcode_width]" data-rule-digits="true"
                                               data-rule-required="true" class="input-small"
                                               value="{$setting.share_qrcode_width}"> <span class="help-line">(px)像素，只可输入数字</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <button type="button" class="btn btn-primary" id="show_share_img">点击预览效果</button>
                                <div id="share_img_box">
                                    <img src="{$share_bg[0]}" id="share_bg_img">
                                    <div class="share_qrcode hide"><img
                                            src=""
                                            style="width: 100%; height: 100%;"></div>
                                    <div class="share_avatar hide"><span
                                            class="{$setting['share_avatar_shape']<=0?'circle':''}">头像</span></div>
                                    <div class="share_nick_name hide">邀请者昵称</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </section>
        </section>
        <footer class="footer bg-white b-t p-t">
            <div class="form-group">
                <div class="controls  col-sm-offset-1">
                    <button type="submit" class="btn btn-primary" data-loading-text="保存中...">保存</button>
                </div>
            </div>
        </footer>
    </section>
</form>

<script type="text/javascript">
    function updateShareBg(img) {
        $('#share_bg_img').attr("src", img.image.path);
    }

    $(function () {
        $('.share_img_list img').on('click', function () {
            $('#share_bg_img').attr("src", $(this).attr('src'));
        })
        //二维码处理
        $(".share_qrcode").draggable({
            containment: '#share_img_box', stop: function (event, ui) {
                //console.log(ui);
                $("input[name='setting[share_qrcode_xy]']").val(ui.position.left + ',' + ui.position.top);
            }
        }).resizable({
            containment: '#share_img_box', stop: function (event, ui) {
                //console.log(ui);
                $("input[name='setting[share_qrcode_width]']").val(ui.size.width);
                $(".share_qrcode").css({'height': ui.size.width + 'px'});
            }
        })
        var share_qrcode_xy = '{$setting.share_qrcode_xy}';
        share_qrcode_xy = share_qrcode_xy.split(',');
        $(".share_qrcode").css({
            'left': share_qrcode_xy[0] + 'px',
            'top': share_qrcode_xy[1] + 'px',
            'width': {$setting.share_qrcode_width} + 'px',
            'height': {$setting.share_qrcode_width} + 'px',
        }).removeClass('hide');

        //头像处理
        $(".share_avatar").draggable({
            containment: '#share_img_box', stop: function (event, ui) {
                //console.log(ui);
                $("input[name='setting[share_avatar_xy]']").val(ui.position.left + ',' + ui.position.top);
            }
        }).resizable({
            containment: '#share_img_box', stop: function (event, ui) {
                //console.log(ui);
                $("input[name='setting[share_avatar_width]']").val(ui.size.width);
                $(".share_avatar").css({'height': ui.size.width + 'px'});
            }
        });
        var share_avatar_xy = '{$setting.share_avatar_xy}';
        share_avatar_xy = share_avatar_xy.split(',');
        $(".share_avatar").css({
            'left': share_avatar_xy[0] + 'px',
            'top': share_avatar_xy[1] + 'px',
            'width': {$setting.share_avatar_width} + 'px',
            'height': {$setting.share_avatar_width} + 'px',
        }).removeClass('hide');
        $('.share_avatar_shape').click(function () {
            if ($(this).val() == 0) {
                if ($(".share_avatar span").hasClass('circle')) {
                    return false;
                }
                $(".share_avatar span").addClass('circle');
            } else {
                $(".share_avatar span").removeClass('circle');
            }
        })

        //呢称处理
        $(".share_nick_name").draggable({
            containment: '#share_img_box', stop: function (event, ui) {
                //console.log(ui);
                $("input[name='setting[share_nick_name_xy]']").val(ui.position.left + ',' + ui.position.top);
            }
        });
        var share_nick_name_xy = '{$setting.share_nick_name_xy}';
        share_nick_name_xy = share_nick_name_xy.split(',');
        $(".share_nick_name").css({
            'left': share_nick_name_xy[0] + 'px',
            'top': share_nick_name_xy[1] + 'px',
            'font-size': {$setting.share_nick_name_size} + 'px',
            'color': '{$setting.share_nick_name_color}',
        }).removeClass('hide');
        //监听文本框
        $("input[name='setting[share_nick_name_color]']").on('input propertychange', function () {
            $(".share_nick_name").css({'color': $(this).val()});

        });
        $("input[name='setting[share_nick_name_size]']").on('input propertychange', function () {
            $(".share_nick_name").css({'font-size': $(this).val() + 'px'});

        });

    })
    var arrival_code = Math.ceil(Math.random() * 1000) + 1000;
    $('#sarrival_code_em').html(arrival_code);
    $('#evalArrival').click(function () {
        var _arrival_code = $('#arrival_code').val();
        if (_arrival_code == '') {
            _alert('请输入校验码，后再操作.', true);
            return false;
        }
        if (_arrival_code != arrival_code) {
            _alert('校验码为' + arrival_code + '，请核实输入是否正确.', true);
            return false;
        }
        _confirm('确定执行 - 手动执行结算？', function () {
            jq_ajax('{:url("evalArrival")}', '', function (res) {
                _alert(res.msg, true);
            });
        });
    })
    $('#show_share_img').click(function () {
        var obj = this;
        $(obj).html('预览图生成中..');
        var data = $('#_form').toJson();
        jq_ajax('{:url("mergeShareImg")}', data, function () {
            $(obj).html('点击预览效果');
            window.open("/upload/share_bg/test_share.jpg?" + Math.random());
        })
    })
</script>

{/block}
{block name="footer" }
<script type="text/javascript">
    seajs.use(["dist/plupload/init.js", "dist/goods/init.js"])
</script>
{/block}
